<template>
  <a-cascader
    :fieldNames="{ label: 'label', value: 'code', children: 'children' }"
    :options="areaData"
    :placeholder="placeholder"
    :show-search="{ filter }"
    v-model="selectedValues"
    @change="onChange"
  />
</template>
<script>
import areaData from '../modules/areCity.json'
export default {
  name: 'AreaSelect',
  props: {
    placeholder: {
      type: String,
      default: '请选择省市区'
    },
    defaultValue: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // 地区数据
      areaData,
      // 选择的数据
      selectedValues: []
    }
  },
  created() {
    if (this.defaultValue.length) {
      this.selectedValues = [...this.defaultValue]
    }
  },
  watch: {
    defaultValue(newValue) {
      if (newValue.length) {
        this.selectedValues = newValue
      } else {
        this.selectedValues = []
      }
    }
  },

  methods: {
    onChange(value, a) {
      // console.log('value', value)
      // console.log('a', a)

      this.$emit('change', a)
    },
    filter(inputValue, path) {
      // return path.componentOptions.children[0].text.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0

      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    }
  }
}
</script>
<style lang="scss" scoped></style>
